import React, { useState } from 'react';
import './App.css';
import { Button, Tabs, Upload, message as antdMessage } from 'antd'
import { UploadChangeParam, UploadFile } from 'antd/es/upload';
import logo from './logo.svg'
function App() {
  const [url, setUrl] = useState<string>(logo)
  const beforeUpload = (file: File) => {
    if(!file) {
      antdMessage.error('不可以为空')
      return Upload.LIST_IGNORE
    } 

    // 1. 检测大小
    if(file.size  >  400 * 1024) {
      antdMessage.error('最大只能上传400kb图片')
      return Upload.LIST_IGNORE
    }
    // 2. 上传 jpeg
    if(!file.type.includes('jpeg')) {
      antdMessage.error('只可以上传jpg图片和jpeg图片')
      return  Upload.LIST_IGNORE
    }


    return true
  }

  const onChange = (info: UploadChangeParam<UploadFile<any>>) => {
    const resp = info.file.response
    if(resp) {
      const { code, message, data } = resp;
      if(code === 200) {
        const url = data.url;
        setUrl(url)
      } else {
        antdMessage.error(message)
      }
    }
  }

  return (
    <div className="App">
      <Tabs activeKey="3">
        <Tabs.TabPane tab="上传图片" key={1}>1</Tabs.TabPane>
        <Tabs.TabPane tab="上传文件" key={2}>2</Tabs.TabPane>
        <Tabs.TabPane tab="上传PNG图片" key={3}>
          <Upload beforeUpload={(file) => beforeUpload(file)} action="/api/upload" onChange={(info) => onChange(info)}>
            <img src={url} alt=""  height={200}/>
          </Upload>
        
        </Tabs.TabPane>
      </Tabs>
    </div>
  );
}

export default App;

